Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
prosemirror-inputrules
Advanced tools
The prosemirror-inputrules package provides a way to define input rules for ProseMirror editors. These rules can automatically transform text as the user types, such as converting markdown-like syntax into rich text formatting.
Basic Input Rule
This code demonstrates how to create a basic input rule that transforms a markdown-like bullet list syntax into a bullet list node in a ProseMirror editor.
const { inputRules, wrappingInputRule } = require('prosemirror-inputrules');
const { Schema } = require('prosemirror-model');
const { EditorState } = require('prosemirror-state');
const { EditorView } = require('prosemirror-view');
// Define a schema
const schema = new Schema({
nodes: {
doc: { content: 'block+' },
paragraph: { content: 'inline*', group: 'block' },
text: { group: 'inline' }
},
marks: {}
});
// Define an input rule
const bulletListRule = wrappingInputRule(/^\s*([-+*])\s$/, schema.nodes.bullet_list);
// Create an editor state with the input rule plugin
const state = EditorState.create({
schema,
plugins: [inputRules({ rules: [bulletListRule] })]
});
// Create an editor view
const view = new EditorView(document.querySelector('#editor'), {
state
});
Custom Input Rule
This code demonstrates how to create a custom input rule that transforms a markdown-like heading syntax into a heading node in a ProseMirror editor.
const { inputRules, textblockTypeInputRule } = require('prosemirror-inputrules');
const { Schema } = require('prosemirror-model');
const { EditorState } = require('prosemirror-state');
const { EditorView } = require('prosemirror-view');
// Define a schema
const schema = new Schema({
nodes: {
doc: { content: 'block+' },
heading: { content: 'inline*', group: 'block', attrs: { level: { default: 1 } } },
text: { group: 'inline' }
},
marks: {}
});
// Define a custom input rule
const headingRule = textblockTypeInputRule(/^#\s$/, schema.nodes.heading, { level: 1 });
// Create an editor state with the input rule plugin
const state = EditorState.create({
schema,
plugins: [inputRules({ rules: [headingRule] })]
});
// Create an editor view
const view = new EditorView(document.querySelector('#editor'), {
state
});
Quill is a modern WYSIWYG editor built for compatibility and extensibility. It provides a rich API for customizing the editor's behavior and appearance. Unlike prosemirror-inputrules, Quill comes with built-in support for various input transformations and does not require additional plugins for basic input rules.
Draft.js is a framework for building rich text editors in React. It provides a set of tools for managing editor state and handling input transformations. Similar to prosemirror-inputrules, Draft.js allows developers to define custom input rules, but it is more tightly integrated with the React ecosystem.
Slate is a completely customizable framework for building rich text editors. It provides a set of primitives for defining the editor's behavior and appearance. Like prosemirror-inputrules, Slate allows developers to define custom input rules, but it offers more flexibility and control over the editor's behavior.
[ WEBSITE | ISSUES | FORUM | CHANGELOG ]
This is a core module of ProseMirror. ProseMirror is a well-behaved rich semantic content editor based on contentEditable, with support for collaborative editing and custom document schemas.
This module exports a plugin that can be used to define input rules, things that should happen when input matching a given pattern is typed, along with a number of predefined rules.
The project page has more information, a number of examples and the documentation.
This code is released under an MIT license. There's a forum for general discussion and support requests, and the Github bug tracker is the place to report issues.
We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.
1.4.0 (2024-01-30)
Input rules now take an inCode
option that controls whether they should apply inside nodes marked as code.
FAQs
Automatic transforms on text input for ProseMirror
The npm package prosemirror-inputrules receives a total of 1,216,232 weekly downloads. As such, prosemirror-inputrules popularity was classified as popular.
We found that prosemirror-inputrules demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.